import { PlusOutlined, SettingOutlined } from '@ant-design/icons'
import { ActionType } from '@ant-design/pro-components'
import { BetaSchemaForm } from '@ant-design/pro-form'
import { PageContainer } from '@ant-design/pro-layout'
import ProTable from '@ant-design/pro-table'
import { useCtx, useModalForm, useModelTable } from '@sker/sdk'
import { renderAdminPage } from '@sker/ui'
import { Button, Modal, Popconfirm, Alert, Switch } from 'antd'
import { useRef } from 'react'
export const AccountPage: React.FC<{}> = () => {
    const model = useModelTable('wx_account', 'uuid', 'id')
    const actionRef = useRef<ActionType>()
    const { history } = useCtx();
    const { setOpen, setTitle, modalProps, formProps } = useModalForm({
        title: '添加小程序',
        columns: async () => {
            return [
                { dataIndex: 'id', formItemProps: { hidden: true } },
                { title: '中文名称', dataIndex: 'title' },
                { title: '英文名称', tooltip: '唯一', dataIndex: 'name' },
                { title: 'AppId', dataIndex: 'appid' },
                { title: 'Secret', dataIndex: 'secret' },
            ]
        },
        onFinish: async (values) => {
            await model.save(values)
            setOpen(false)
            actionRef.current?.reload();
        }
    })
    return <PageContainer title={'微信小程序管理'} content={<Alert type={'warning'} message={'接口调用时，请在Headers里设置APPID,多账号下，需要unionid请自行申请开放平台，如不传则为默认小程序'}></Alert>} extra={<Button type={'primary'} icon={<PlusOutlined />} onClick={e => {
        setOpen(true)
    }}>添加</Button>}>
        <Modal {...modalProps}>
            <BetaSchemaForm {...formProps} />
        </Modal>
        <ProTable<any> rowKey={'id'} actionRef={actionRef} search={false} toolBarRender={false} columns={[
            { title: '中文名称', dataIndex: 'title' },
            { title: '英文名称', tooltip: '唯一', dataIndex: 'name' },
            { title: 'AppId', dataIndex: 'appid' },
            { title: 'Secret', dataIndex: 'secret' },
            {
                title: '是否默认', dataIndex: 'is_default', renderText(text, record, index, action) {
                    return <Switch checked={text} onChange={async e => {
                        if (e) {
                            const ids = await model.findAll(['id']).then(res => res.data.map((it: any) => it.id))
                            await model.saves(ids.map((id: any) => ({ id: id, is_default: false })))
                        }
                        await model.save({ id: record.id, is_default: e })
                        actionRef.current?.reload();
                    }} />
                },
            },
            {
                title: '操作', align: 'right', renderText(text, record, index, action) {
                    return <>
                        <Button size={'small'} type={'link'} icon={<SettingOutlined />} onClick={e => {
                            history.push('/imeepos/miniprogram/web/account_detail?id=' + record.id)
                        }}>管理</Button>
                        <Button size={'small'} type={'link'} onClick={e => {
                            setTitle('修改微信小程序')
                            setOpen(true, record)
                        }}>修改</Button>
                        <Popconfirm onConfirm={async e => {
                            await model.delete(record.id)
                            await actionRef.current?.reload();
                        }} title={'此操作不可逆!您确定要执行此操作吗？'} description={'删除后无法恢复，请慎重操作！！'}>
                            <Button size={'small'} type={'link'} danger>删除</Button>
                        </Popconfirm>
                    </>
                },
            },
        ]} request={async (params) => {
            return model.find([
                'id', 'title', 'name', 'appid', 'secret', 'is_default'
            ], [], [{ field: 'create_date', order: 'desc' }], { current: params.current, pageSize: params.pageSize })
        }} />
    </PageContainer>
}
renderAdminPage(AccountPage, 'imeepos/miniprogram/web/account')